ஜாவாஸ்கிரிப்ட் மாட்யூல்களில் புரட்சி: சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ் பற்றிய ஒரு ஆழமான பார்வை

ஜாவாஸ்கிரிப்ட் சுற்றுச்சூழல் தொடர்ந்து பரிணமித்து வரும் நிலையில் உள்ளது. உலாவிகளுக்கான ஒரு எளிய ஸ்கிரிப்டிங் மொழியாக அதன் தாழ்மையான தொடக்கத்திலிருந்து, சிக்கலான வலை பயன்பாடுகள் முதல் சர்வர் பக்க உள்கட்டமைப்பு வரை அனைத்தையும் இயக்கும் ஒரு உலகளாவிய சக்தியாக வளர்ந்துள்ளது. இந்த பரிணாம வளர்ச்சியின் ஒரு மூலக்கல்லாக அதன் மாட்யூல் அமைப்பான ES மாட்யூல்ஸ் (ESM) தரப்படுத்தப்பட்டது. இருப்பினும், ESM உலகளாவிய தரமாக மாறியபோதும், புதிய சவால்கள் எழுந்துள்ளன, இது சாத்தியமானவற்றின் எல்லைகளைத் தள்ளுகிறது. இது TC39 இலிருந்து ஒரு அற்புதமான மற்றும் சாத்தியமான மாற்றத்தக்க புதிய முன்மொழிவுக்கு வழிவகுத்துள்ளது: சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ்.

தற்போது தரநிலைகள் பாதையில் முன்னேறி வரும் இந்த முன்மொழிவு, ஜாவாஸ்கிரிப்ட் சார்புகளை எவ்வாறு கையாள முடியும் என்பதில் ஒரு அடிப்படை மாற்றத்தை பிரதிபலிக்கிறது. இது "பில்ட் டைம்" அல்லது "சோர்ஸ் ஃபேஸ்" என்ற கருத்தை நேரடியாக மொழிக்குள் அறிமுகப்படுத்துகிறது, டெவலப்பர்களை கம்பைலேஷன் போது மட்டுமே இயங்கும் மாட்யூல்களை இறக்குமதி செய்ய அனுமதிக்கிறது, இறுதி ரன்டைம் கோடின் ஒரு பகுதியாக இல்லாமல் அதை பாதிக்கிறது. இது நேட்டிவ் மேக்ரோக்கள், ஜீரோ-காஸ்ட் வகை அப்ஸ்ட்ராக்சன்கள் மற்றும் சீரான பில்ட்-டைம் கோட் உருவாக்கம் போன்ற சக்திவாய்ந்த அம்சங்களுக்கான கதவைத் திறக்கிறது, அனைத்தும் ஒரு தரப்படுத்தப்பட்ட, பாதுகாப்பான கட்டமைப்பிற்குள்.

உலகெங்கிலும் உள்ள டெவலப்பர்களுக்கு, ஜாவாஸ்கிரிப்ட் டூலிங், ஃபிரேம்வொர்க்குகள் மற்றும் பயன்பாட்டுக் கட்டமைப்பில் அடுத்த அலை புதுமைகளுக்குத் தயாராவதற்கு இந்த முன்மொழிவைப் புரிந்துகொள்வது முக்கியம். இந்த விரிவான வழிகாட்டி, சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ் என்றால் என்ன, அவை தீர்க்கும் சிக்கல்கள், அவற்றின் நடைமுறை பயன்பாட்டு நிகழ்வுகள் மற்றும் அவை முழு உலகளாவிய ஜாவாஸ்கிரிப்ட் சமூகத்தில் ஏற்படுத்தவிருக்கும் ஆழ்ந்த தாக்கத்தை ஆராயும்.

ஜாவாஸ்கிரிப்ட் மாட்யூல்களின் ஒரு சுருக்கமான வரலாறு: ESM க்கான பாதை

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸின் முக்கியத்துவத்தைப் பாராட்ட, நாம் முதலில் ஜாவாஸ்கிரிப்ட் மாட்யூல்களின் பயணத்தைப் புரிந்து கொள்ள வேண்டும். அதன் வரலாற்றின் பெரும்பகுதிக்கு, ஜாவாஸ்கிரிப்ட்டில் ஒரு நேட்டிவ் மாட்யூல் அமைப்பு இல்லை, இது படைப்பாற்றல் ஆனால் துண்டு துண்டான தீர்வுகளின் ஒரு காலத்திற்கு வழிவகுத்தது.

குளோபல்கள் மற்றும் IIFEகளின் சகாப்தம்

ஆரம்பத்தில், டெவலப்பர்கள் ஒரு HTML கோப்பில் பல <script> குறிச்சொற்களை ஏற்றுவதன் மூலம் சார்புகளை நிர்வகித்தனர். இது குளோபல் நேம்ஸ்பேஸை (உலாவிகளில் window பொருள்) மாசுபடுத்தியது, இது வேரியபிள் மோதல்கள், கணிக்க முடியாத ஏற்றுதல் வரிசைகள் மற்றும் ஒரு பராமரிப்பு দুঃस्वप्னத்திற்கு வழிவகுத்தது. இதைக் குறைக்க ஒரு பொதுவான முறை உடனடியாக செயல்படுத்தப்பட்ட செயல்பாட்டு வெளிப்பாடு (IIFE) ஆகும், இது ஒரு ஸ்கிரிப்ட்டின் மாறிகளுக்கு ஒரு தனியார் நோக்கத்தை உருவாக்கியது, அவை குளோபல் நோக்கத்திற்குள் கசிவதைத் தடுத்தது.

சமூகத்தால் இயக்கப்படும் தரநிலைகளின் எழுச்சி

பயன்பாடுகள் மிகவும் சிக்கலானதாக வளர்ந்ததால், சமூகம் மேலும் வலுவான தீர்வுகளை உருவாக்கியது:

• காமன்ஜேஎஸ் (CJS): நோட்.js ஆல் பிரபலப்படுத்தப்பட்டது, CJS ஒரு ஒத்திசைவான require() செயல்பாடு மற்றும் ஒரு exports பொருளைப் பயன்படுத்துகிறது. இது சர்வர்க்காக வடிவமைக்கப்பட்டது, அங்கு கோப்பு முறைமையிலிருந்து மாட்யூல்களைப் படிப்பது ஒரு வேகமான, தடுக்கும் செயலாகும். அதன் ஒத்திசைவான தன்மை உலாவிக்கு குறைவாகப் பொருத்தமானது, அங்கு நெட்வொர்க் கோரிக்கைகள் ஒத்திசைவற்றவை.
• ஒத்திசைவற்ற மாட்யூல் வரையறை (AMD): உலாவிக்காக வடிவமைக்கப்பட்டது, AMD (மற்றும் அதன் மிகவும் பிரபலமான செயல்படுத்தல், RequireJS) மாட்யூல்களை ஒத்திசைவற்ற முறையில் ஏற்றியது. அதன் தொடரியல் காமன்ஜேஎஸ்ஸை விட விரிவானதாக இருந்தது, ஆனால் கிளையன்ட் பக்க பயன்பாடுகளில் நெட்வொர்க் தாமதத்தின் சிக்கலைத் தீர்த்தது.

தரப்படுத்தல்: ES மாட்யூல்ஸ் (ESM)

இறுதியாக, ECMAScript 2015 (ES6) ஒரு நேட்டிவ், தரப்படுத்தப்பட்ட மாட்யூல் அமைப்பை அறிமுகப்படுத்தியது: ES மாட்யூல்ஸ். ESM ஒரு சுத்தமான, அறிவிப்பு தொடரியல் (import மற்றும் export) உடன் இரு உலகங்களிலும் சிறந்ததைக் கொண்டு வந்தது, அதை நிலையானதாக பகுப்பாய்வு செய்ய முடியும். இந்த நிலையான தன்மை, பன்ட்லர்கள் போன்ற கருவிகளை, கோட் இயங்குவதற்கு முன்பே மரம்-குலுக்கல் (பயன்படுத்தப்படாத குறியீட்டை அகற்றுதல்) போன்ற மேம்படுத்தல்களைச் செய்ய அனுமதிக்கிறது. ESM ஒத்திசைவற்றதாக வடிவமைக்கப்பட்டுள்ளது மற்றும் இப்போது உலாவிகள் மற்றும் நோட்.js முழுவதும் உலகளாவிய தரமாக உள்ளது, இது உடைந்த சுற்றுச்சூழலை ஒருங்கிணைக்கிறது.

நவீன ES மாட்யூல்களின் மறைக்கப்பட்ட வரம்புகள்

ESM ஒரு மாபெரும் வெற்றி, ஆனால் அதன் வடிவமைப்பு பிரத்தியேகமாக ரன்டைம் நடத்தையில் கவனம் செலுத்துகிறது. ஒரு import அறிக்கை, பயன்பாடு இயங்கும் போது பெறப்பட வேண்டிய, அலசப்பட வேண்டிய மற்றும் செயல்படுத்தப்பட வேண்டிய ஒரு சார்புநிலையைக் குறிக்கிறது. இந்த ரன்டைம்-மைய மாதிரி, சக்திவாய்ந்ததாக இருந்தாலும், சுற்றுச்சூழல் வெளிப்புற, தரமற்ற கருவிகளுடன் தீர்த்து வரும் பல சவால்களை உருவாக்குகிறது.

சிக்கல் 1: பில்ட்-டைம் சார்புகளின் பெருக்கம்

நவீன வலை மேம்பாடு ஒரு பில்ட் படியை பெரிதும் சார்ந்துள்ளது. டைப்ஸ்கிரிப்ட், பேபல், வைட், வெப்பேக் மற்றும் போஸ்ட்சிஎஸ்எஸ் போன்ற கருவிகளைப் பயன்படுத்தி எங்கள் மூலக் குறியீட்டை உற்பத்திக்கு உகந்த வடிவத்திற்கு மாற்றுகிறோம். இந்த செயல்முறையில் பல சார்புகள் உள்ளன, அவை பில்ட் நேரத்தில் மட்டுமே தேவை, ரன்டைமில் அல்ல.

டைப்ஸ்கிரிப்டைக் கவனியுங்கள். நீங்கள் import { type User } from './types' என்று எழுதும்போது, ரன்டைம் சமமான இல்லாத ஒரு நிறுவனத்தை இறக்குமதி செய்கிறீர்கள். டைப்ஸ்கிரிப்ட் கம்பைலர் இந்த இறக்குமதி மற்றும் வகை தகவலை கம்பைலேஷனின் போது அழித்துவிடும். இருப்பினும், ஜாவாஸ்கிரிப்ட் மாட்யூல் அமைப்பின் கண்ணோட்டத்தில், இது மற்றொரு இறக்குமதி மட்டுமே. பன்ட்லர்கள் மற்றும் இன்ஜின்கள் இந்த "வகை-மட்டும்" இறக்குமதிகளைக் கையாள மற்றும் நிராகரிக்க சிறப்பு தர்க்கத்தைக் கொண்டிருக்க வேண்டும், இது ஜாவாஸ்கிரிப்ட் மொழி விவரக்குறிப்பிற்கு வெளியே இருக்கும் ஒரு தீர்வாகும்.

சிக்கல் 2: ஜீரோ-காஸ்ட் அப்ஸ்ட்ராக்சன்களுக்கான தேடல்

ஒரு ஜீரோ-காஸ்ட் அப்ஸ்ட்ராக்சன் என்பது ஒரு அம்சமாகும், இது மேம்பாட்டின் போது உயர் மட்ட வசதியை வழங்குகிறது, ஆனால் ரன்டைம் மேல்நிலை இல்லாமல் அதிக திறமையான குறியீட்டிற்கு கம்பைல் செய்யப்படுகிறது. ஒரு சரியான உதாரணம் ஒரு சரிபார்ப்பு நூலகம். நீங்கள் எழுதலாம்:

validate(userSchema, userData);

ரன்டைமில், இது ஒரு செயல்பாட்டு அழைப்பு மற்றும் சரிபார்ப்பு தர்க்கத்தின் செயல்பாட்டை உள்ளடக்கியது. பில்ட் நேரத்தில், மொழி, ஸ்கீமாவை பகுப்பாய்வு செய்து, மிகவும் குறிப்பிட்ட, இன்லைன் செய்யப்பட்ட சரிபார்ப்பு குறியீட்டை உருவாக்க முடிந்தால் என்ன হবে, பொதுவான `validate` செயல்பாட்டு அழைப்பையும், ஸ்கீமா பொருளையும் இறுதி பண்டிலில் இருந்து அகற்றிவிடும்? இது தற்போது ஒரு தரப்படுத்தப்பட்ட வழியில் செய்ய முடியாதது. முழு `validate` செயல்பாடு மற்றும் `userSchema` பொருள் கிளையண்டிற்கு அனுப்பப்பட வேண்டும், சரிபார்ப்பு வேறுவிதமாகச் செய்யப்பட்டிருக்கலாம் அல்லது முன்-கம்பைல் செய்யப்பட்டிருக்கலாம் என்றாலும் கூட.

சிக்கல் 3: தரப்படுத்தப்பட்ட மேக்ரோக்களின் இல்லாமை

மேக்ரோக்கள் ரஸ்ட், லிஸ்ப் மற்றும் ஸ்விஃப்ட் போன்ற மொழிகளில் ஒரு சக்திவாய்ந்த அம்சமாகும். அவை அடிப்படையில் கம்பைல் நேரத்தில் குறியீட்டை எழுதும் குறியீடு. ஜாவாஸ்கிரிப்டில், பேபல் செருகுநிரல்கள் அல்லது SWC உருமாற்றங்கள் போன்ற கருவிகளைப் பயன்படுத்தி மேக்ரோக்களை உருவகப்படுத்துகிறோம். மிகவும் பரவலான உதாரணம் JSX:

const element = <h1>Hello, World</h1>;

இது செல்லுபடியாகும் ஜாவாஸ்கிரிப்ட் அல்ல. ஒரு பில்ட் கருவி அதை பின்வருமாறு மாற்றுகிறது:

const element = React.createElement('h1', null, 'Hello, World');

இந்த உருமாற்றம் சக்தி வாய்ந்தது, ஆனால் முற்றிலும் வெளிப்புற டூலிங்கை நம்பியுள்ளது. இந்த வகையான தொடரியல் உருமாற்றத்தைச் செய்யும் ஒரு செயல்பாட்டை வரையறுக்க எந்த ஒரு நேட்டிவ், மொழி சார்ந்த வழியும் இல்லை. இந்த தரப்படுத்தல் இல்லாமை ஒரு சிக்கலான மற்றும் பெரும்பாலும் பலவீனமான டூலிங் சங்கிலிக்கு வழிவகுக்கிறது.

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ்களை அறிமுகப்படுத்துதல்: ஒரு முன்னுதாரண மாற்றம்

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ் இந்த வரம்புகளுக்கு ஒரு நேரடி பதில். இந்த முன்மொழிவு ஒரு புதிய இறக்குமதி அறிவிப்பு தொடரியலை அறிமுகப்படுத்துகிறது, இது பில்ட்-டைம் சார்புகளை ரன்டைம் சார்புகளிலிருந்து வெளிப்படையாகப் பிரிக்கிறது.

புதிய தொடரியல் எளிமையானது மற்றும் உள்ளுணர்வு மிக்கது: import source.

import { MyType } from './types.js'; // ஒரு நிலையான, ரன்டைம் இறக்குமதி
import source { MyMacro } from './macros.js'; // ஒரு புதிய, சோர்ஸ் ஃபேஸ் இறக்குமதி

முக்கிய கருத்து: ஃபேஸ் பிரிப்பு

முக்கிய யோசனை, குறியீடு மதிப்பீட்டின் இரண்டு தனித்துவமான ஃபேஸ்களை முறைப்படுத்துவதாகும்:

1. சோர்ஸ் ஃபேஸ் (பில்ட் டைம்): இந்த ஃபேஸ் முதலில் நிகழ்கிறது, இது ஒரு ஜாவாஸ்கிரிப்ட் "ஹோஸ்ட்" (ஒரு பன்ட்லர், நோட்.js அல்லது டெனோ போன்ற ஒரு ரன்டைம், அல்லது ஒரு உலாவியின் மேம்பாட்டு/பில்ட் சூழல்) மூலம் கையாளப்படுகிறது. இந்த ஃபேஸின் போது, ஹோஸ்ட் import source அறிவிப்புகளைத் தேடுகிறது. பின்னர் அது இந்த மாட்யூல்களை ஒரு சிறப்பு, தனிமைப்படுத்தப்பட்ட சூழலில் ஏற்றி இயக்குகிறது. இந்த மாட்யூல்கள் அவற்றை இறக்குமதி செய்யும் மாட்யூல்களின் மூலக் குறியீட்டை ஆய்வு செய்து மாற்ற முடியும்.
2. ரன்டைம் ஃபேஸ் (செயல்படுத்தும் நேரம்): இது நாம் அனைவரும் அறிந்த ஃபேஸ். ஜாவாஸ்கிரிப்ட் இன்ஜின் இறுதி, சாத்தியமான மாற்றப்பட்ட குறியீட்டை இயக்குகிறது. import source வழியாக இறக்குமதி செய்யப்பட்ட அனைத்து மாட்யூல்களும் மற்றும் அவற்றைப் பயன்படுத்திய குறியீடும் முற்றிலும் போய்விட்டன; அவை ரன்டைம் மாட்யூல் வரைபடத்தில் எந்த தடயத்தையும் விட்டுச் செல்வதில்லை.

இதை மொழியின் விவரக்குறிப்பில் நேரடியாகக் கட்டமைக்கப்பட்ட ஒரு தரப்படுத்தப்பட்ட, பாதுகாப்பான மற்றும் மாட்யூல்-அறிந்த முன்செயலி என்று நினைத்துப் பாருங்கள். இது சி முன்செயலியைப் போன்ற வெறும் உரை மாற்றுதல் அல்ல; இது ஜாவாஸ்கிரிப்ட்டின் அமைப்புடன், அதாவது சுருக்க தொடரியல் மரங்கள் (ASTs) உடன் வேலை செய்யக்கூடிய ஒரு ஆழமாக ஒருங்கிணைக்கப்பட்ட அமைப்பாகும்.

முக்கிய பயன்பாட்டு நிகழ்வுகள் மற்றும் நடைமுறை எடுத்துக்காட்டுகள்

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸின் உண்மையான சக்தி, அவை நேர்த்தியாக தீர்க்கக்கூடிய சிக்கல்களைப் பார்க்கும்போது தெளிவாகிறது. மிகவும் தாக்கத்தை ஏற்படுத்தும் சில பயன்பாட்டு நிகழ்வுகளை ஆராய்வோம்.

பயன்பாட்டு நிகழ்வு 1: நேட்டிவ், ஜீரோ-காஸ்ட் டைப் அனோடேஷன்கள்

இந்த முன்மொழிவின் முதன்மை உந்துதல்களில் ஒன்று, டைப்ஸ்கிரிப்ட் மற்றும் ஃப்ளோ போன்ற வகை அமைப்புகளுக்கு ஜாவாஸ்கிரிப்ட் மொழிக்குள் ஒரு நேட்டிவ் இல்லத்தை வழங்குவதாகும். தற்போது, `import type { ... }` என்பது ஒரு டைப்ஸ்கிரிப்ட்-குறிப்பிட்ட அம்சம். சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ் மூலம், இது ஒரு நிலையான மொழி கட்டமைப்பாக மாறுகிறது.

தற்போதைய (டைப்ஸ்கிரிப்ட்):

// types.ts
export interface User {
id: number;
name: string;
}

// app.ts
import type { User } from './types';
const user: User = { id: 1, name: 'Alice' };

எதிர்கால (தரநிலை ஜாவாஸ்கிரிப்ட்):

// types.js
export interface User { /* ... */ } // ஒரு வகை தொடரியல் முன்மொழிவும் ஏற்றுக்கொள்ளப்பட்டது என்று கருதி

// app.js
import source { User } from './types.js';
const user: User = { id: 1, name: 'Alice' };

நன்மை: import source அறிக்கை எந்த ஜாவாஸ்கிரிப்ட் கருவி அல்லது இன்ஜினுக்கும் ./types.js ஒரு பில்ட்-டைம்-மட்டும் சார்பு என்று தெளிவாகக் கூறுகிறது. ரன்டைம் இன்ஜின் அதை ஒருபோதும் பெறவோ அல்லது அலசவோ முயற்சிக்காது. இது வகை அழிப்பு என்ற கருத்தை தரப்படுத்துகிறது, அதை மொழியின் ஒரு முறையான பகுதியாக ஆக்குகிறது மற்றும் பன்ட்லர்கள், லின்டர்கள் மற்றும் பிற கருவிகளின் வேலையை எளிதாக்குகிறது.

பயன்பாட்டு நிகழ்வு 2: சக்திவாய்ந்த மற்றும் சுகாதாரமான மேக்ரோக்கள்

மேக்ரோக்கள் சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸின் மிகவும் மாற்றத்தக்க பயன்பாடு ஆகும். அவை டெவலப்பர்களுக்கு ஜாவாஸ்கிரிப்ட்டின் தொடரியலை நீட்டிக்கவும், பாதுகாப்பான மற்றும் தரப்படுத்தப்பட்ட வழியில் சக்திவாய்ந்த, டொமைன்-சார்ந்த மொழிகளை (DSLs) உருவாக்கவும் அனுமதிக்கின்றன.

பில்ட் நேரத்தில் தானாகவே கோப்பு மற்றும் வரி எண்ணைச் சேர்க்கும் ஒரு எளிய லாக்கிங் மேக்ரோவை கற்பனை செய்து பார்ப்போம்.

மேக்ரோ வரையறை:

// macros.js
export function log(macroContext) {
// 'macroContext' அழைப்பு தளத்தை ஆய்வு செய்வதற்கான APIகளை வழங்கும்
const callSite = macroContext.getCallSiteInfo(); // எ.கா., { file: 'app.js', line: 5 }
const messageArgument = macroContext.getArgument(0); // செய்திக்கு AST ஐப் பெறுக // ஒரு console.log அழைப்பிற்கான புதிய AST ஐத் திருப்புக
return `console.log("[${callSite.file}:${callSite.line}]", ${messageArgument})`;
}

மேக்ரோவைப் பயன்படுத்துதல்:

// app.js
import source { log } from './macros.js'; const value = 42;
log(`The value is: ${value}`);

கம்பைல் செய்யப்பட்ட ரன்டைம் கோட்:

// app.js (சோர்ஸ் ஃபேஸுக்குப் பிறகு)
const value = 42;
console.log("[app.js:5]", `The value is: ${value}`);

நன்மை: நாங்கள் ஒரு மேலும் வெளிப்பாடான `log` செயல்பாட்டை உருவாக்கியுள்ளோம், இது பில்ட்-டைம் தகவலை நேரடியாக ரன்டைம் குறியீட்டில் செலுத்துகிறது. ரன்டைமில் `log` செயல்பாட்டு அழைப்பு இல்லை, ஒரு நேரடி `console.log` மட்டுமே. இது ஒரு உண்மையான ஜீரோ-காஸ்ட் அப்ஸ்ட்ராக்சன். இந்த அதே கொள்கை JSX, ஸ்டைல்ட்-காம்போனென்ட்ஸ், சர்வதேசமயமாக்கல் (i18n) நூலகங்கள் மற்றும் பலவற்றை செயல்படுத்தப் பயன்படுத்தப்படலாம், அனைத்தும் தனிப்பயன் பேபல் செருகுநிரல்கள் இல்லாமல்.

பயன்பாட்டு நிகழ்வு 3: ஒருங்கிணைந்த பில்ட்-டைம் கோட் உருவாக்கம்

பல பயன்பாடுகள் மற்ற மூலங்களிலிருந்து குறியீட்டை உருவாக்குவதை நம்பியுள்ளன, ஒரு GraphQL ஸ்கீமா, ஒரு புரோட்டோகால் பஃபர்ஸ் வரையறை, அல்லது YAML அல்லது JSON போன்ற ஒரு எளிய தரவுக் கோப்பு போன்றவை.

உங்களிடம் ஒரு GraphQL ஸ்கீமா உள்ளது மற்றும் அதற்காக ஒரு உகந்த கிளையண்டை உருவாக்க விரும்புகிறீர்கள் என்று கற்பனை செய்து பாருங்கள். இன்று, இதற்கு வெளிப்புற CLI கருவிகள் மற்றும் ஒரு சிக்கலான பில்ட் அமைப்பு தேவை. சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ் மூலம், இது உங்கள் மாட்யூல் வரைபடத்தின் ஒரு ஒருங்கிணைந்த பகுதியாக மாறக்கூடும்.

ஜெனரேட்டர் மாட்யூல்:

// graphql-codegen.js
export function createClient(schemaText) {
// 1. schemaText ஐ அலசவும்
// 2. ஒரு டைப்டு கிளையண்டிற்கான ஜாவாஸ்கிரிப்ட் குறியீட்டை உருவாக்கவும்
// 3. உருவாக்கப்பட்ட குறியீட்டை ஒரு ஸ்டிரிங்காகத் திருப்புக
const generatedCode = `
export const client = {
query: { /* ... உருவாக்கப்பட்ட முறைகள் ... */ }
};
`;
return generatedCode;
}

ஜெனரேட்டரைப் பயன்படுத்துதல்:

// app.js
// 1. இறக்குமதி வலியுறுத்தல்களைப் பயன்படுத்தி ஸ்கீமாவை உரையாக இறக்குமதி செய்யவும் (ஒரு தனி அம்சம்)
import schema from './api.graphql' with { type: 'text' }; // 2. ஒரு சோர்ஸ் ஃபேஸ் இறக்குமதியைப் பயன்படுத்தி குறியீடு ஜெனரேட்டரை இறக்குமதி செய்யவும்
import source { createClient } from './graphql-codegen.js'; // 3. பில்ட் நேரத்தில் ஜெனரேட்டரை இயக்கி அதன் வெளியீட்டைச் செருகவும்
export const { client } = createClient(schema);

நன்மை: முழு செயல்முறையும் அறிவிப்பு மற்றும் மூலக் குறியீட்டின் ஒரு பகுதியாகும். வெளிப்புற குறியீடு ஜெனரேட்டரை இயக்குவது இனி ஒரு தனி, கைமுறை படி அல்ல. `api.graphql` மாறினால், பில்ட் கருவி தானாகவே `app.js` க்கான சோர்ஸ் ஃபேஸை மீண்டும் இயக்க வேண்டும் என்று அறியும். இது மேம்பாட்டு பணிப்பாய்வை எளிமையாக்கும், மேலும் வலுவானதாகவும், பிழை குறைவாகவும் ஆக்குகிறது.

அது எப்படி வேலை செய்கிறது: ஹோஸ்ட், சாண்ட்பாக்ஸ், மற்றும் ஃபேஸ்கள்

ஜாவாஸ்கிரிப்ட் இன்ஜின் தானே (குரோம் மற்றும் நோட்.js இல் V8 போன்றவை) சோர்ஸ் ஃபேஸை இயக்காது என்பதைப் புரிந்துகொள்வது முக்கியம். பொறுப்பு ஹோஸ்ட் சூழலுக்கு விழுகிறது.

ஹோஸ்டின் பங்கு

ஹோஸ்ட் என்பது ஜாவாஸ்கிரிப்ட் குறியீட்டை கம்பைல் செய்யும் அல்லது இயக்கும் நிரலாகும். இது பின்வருவனவாக இருக்கலாம்:

• வைட், வெப்பேக், அல்லது பார்சல் போன்ற ஒரு பன்ட்லர்.
• நோட்.js அல்லது டெனோ போன்ற ஒரு ரன்டைம்.
• ஒரு உலாவி கூட அதன் DevTools இல் அல்லது ஒரு மேம்பாட்டு சர்வர் பில்ட் செயல்முறையின் போது செயல்படுத்தப்படும் குறியீட்டிற்கு ஒரு ஹோஸ்டாக செயல்பட முடியும்.

ஹோஸ்ட் இரண்டு-ஃபேஸ் செயல்முறையை ஒருங்கிணைக்கிறது:

1. இது குறியீட்டை அலசி அனைத்து import source அறிவிப்புகளையும் கண்டறிகிறது.
2. இது சோர்ஸ் ஃபேஸ் மாட்யூல்களை இயக்குவதற்காக பிரத்யேகமாக ஒரு தனிமைப்படுத்தப்பட்ட, சாண்ட்பாக்ஸ் செய்யப்பட்ட சூழலை (பெரும்பாலும் "ரீல்ம்" என்று அழைக்கப்படுகிறது) உருவாக்குகிறது.
3. இது இந்த சாண்ட்பாக்ஸிற்குள் இறக்குமதி செய்யப்பட்ட சோர்ஸ் மாட்யூல்களிலிருந்து குறியீட்டை இயக்குகிறது. இந்த மாட்யூல்களுக்கு அவை மாற்றும் குறியீட்டுடன் தொடர்பு கொள்ள சிறப்பு APIகள் வழங்கப்படுகின்றன (எ.கா., AST கையாளுதல் APIகள்).
4. மாற்றங்கள் பயன்படுத்தப்பட்டு, இறுதி ரன்டைம் குறியீட்டில் விளைகின்றன.
5. இந்த இறுதி குறியீடு பின்னர் வழக்கமான ஜாவாஸ்கிரிப்ட் இன்ஜினுக்கு ரன்டைம் ஃபேஸிற்காக அனுப்பப்படுகிறது.

பாதுகாப்பு மற்றும் சாண்ட்பாக்சிங் முக்கியமானவை

பில்ட் நேரத்தில் குறியீட்டை இயக்குவது சாத்தியமான பாதுகாப்பு அபாயங்களை அறிமுகப்படுத்துகிறது. ஒரு தீங்கிழைக்கும் பில்ட்-டைம் ஸ்கிரிப்ட் டெவலப்பரின் கணினியில் கோப்பு முறைமை அல்லது நெட்வொர்க்கை அணுக முயற்சிக்கலாம். சோர்ஸ் ஃபேஸ் இறக்குமதி முன்மொழிவு பாதுகாப்பிற்கு வலுவான முக்கியத்துவம் அளிக்கிறது.

சோர்ஸ் ஃபேஸ் குறியீடு ஒரு மிகவும் கட்டுப்படுத்தப்பட்ட சாண்ட்பாக்ஸில் இயங்குகிறது. இயல்பாக, இதற்கு அணுகல் இல்லை:

• உள்ளூர் கோப்பு முறைமை.
• நெட்வொர்க் கோரிக்கைகள்.
• window அல்லது process போன்ற ரன்டைம் குளோபல்கள்.

கோப்பு அணுகல் போன்ற எந்த திறன்களும் ஹோஸ்ட் சூழலால் வெளிப்படையாக வழங்கப்பட வேண்டும், இது பில்ட்-டைம் ஸ்கிரிப்ட்கள் என்ன செய்ய அனுமதிக்கப்படுகின்றன என்பதில் பயனருக்கு முழு கட்டுப்பாட்டையும் அளிக்கிறது. இது பெரும்பாலும் கணினிக்கு முழு அணுகலைக் கொண்ட தற்போதைய செருகுநிரல்கள் மற்றும் ஸ்கிரிப்ட்களின் சுற்றுச்சூழலை விட மிகவும் பாதுகாப்பானது.

ஜாவாஸ்கிரிப்ட் சுற்றுச்சூழலில் உலகளாவிய தாக்கம்

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸின் அறிமுகம் முழு உலகளாவிய ஜாவாஸ்கிரிப்ட் சுற்றுச்சூழல் முழுவதும் அலைகளை அனுப்பும், நாம் கருவிகள், ஃபிரேம்வொர்க்குகள் மற்றும் பயன்பாடுகளை எவ்வாறு உருவாக்குகிறோம் என்பதை அடிப்படையில் மாற்றும்.

ஃபிரேம்வொர்க் மற்றும் நூலக ஆசிரியர்களுக்கு

ரியாக்ட், ஸ்வெல்ட், வ்யூ மற்றும் சாலிட் போன்ற ஃபிரேம்வொர்க்குகள் சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸைப் பயன்படுத்தி தங்கள் கம்பைலர்களை மொழியின் ஒரு பகுதியாக மாற்றலாம். ஸ்வெல்ட் கம்பைலர், இது ஸ்வெல்ட் கூறுகளை உகந்த வெண்ணிலா ஜாவாஸ்கிரிப்டாக மாற்றுகிறது, ஒரு மேக்ரோவாக செயல்படுத்தப்படலாம். JSX ஒரு நிலையான மேக்ரோவாக மாறக்கூடும், ஒவ்வொரு கருவிக்கும் அதன் சொந்த தனிப்பயன் உருமாற்றத்தின் செயல்படுத்தல் தேவையை நீக்குகிறது.

CSS-in-JS நூலகங்கள் தங்கள் அனைத்து ஸ்டைல் அலசல் மற்றும் நிலையான விதி உருவாக்கத்தை பில்ட் நேரத்தில் செய்ய முடியும், ஒரு குறைந்தபட்ச ரன்டைம் அல்லது பூஜ்ஜிய ரன்டைம் கூட அனுப்பும், இது குறிப்பிடத்தக்க செயல்திறன் மேம்பாடுகளுக்கு வழிவகுக்கும்.

டூலிங் டெவலப்பர்களுக்கு

வைட், வெப்பேக், esbuild மற்றும் பிறவற்றின் படைப்பாளிகளுக்கு, இந்த முன்மொழிவு ஒரு சக்திவாய்ந்த, தரப்படுத்தப்பட்ட நீட்டிப்பு புள்ளியை வழங்குகிறது. கருவிகளுக்கு இடையில் வேறுபடும் ஒரு சிக்கலான செருகுநிரல் API ஐ நம்புவதற்குப் பதிலாக, அவர்கள் மொழியின் சொந்த பில்ட்-டைம் ஃபேஸில் நேரடியாக இணைக்க முடியும். இது ஒரு மேலும் ஒருங்கிணைந்த மற்றும் ஒன்றோடொன்று இயங்கக்கூடிய டூலிங் சுற்றுச்சூழலுக்கு வழிவகுக்கும், அங்கு ஒரு கருவிக்காக எழுதப்பட்ட ஒரு மேக்ரோ மற்றொன்றில் தடையின்றி வேலை செய்யும்.

பயன்பாட்டு டெவலப்பர்களுக்கு

ஒவ்வொரு நாளும் ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை எழுதும் மில்லியன் கணக்கான டெவலப்பர்களுக்கு, நன்மைகள் பல:

• எளிமையான பில்ட் கட்டமைப்புகள்: டைப்ஸ்கிரிப்ட், JSX அல்லது குறியீடு உருவாக்கம் போன்ற பொதுவான பணிகளுக்கு செருகுநிரல்களின் சிக்கலான சங்கிலிகளை குறைவாக நம்பியிருத்தல்.
• மேம்படுத்தப்பட்ட செயல்திறன்: உண்மையான ஜீரோ-காஸ்ட் அப்ஸ்ட்ராக்சன்கள் சிறிய பண்டில் அளவுகள் மற்றும் வேகமான ரன்டைம் செயல்பாட்டிற்கு வழிவகுக்கும்.
• மேம்படுத்தப்பட்ட டெவலப்பர் அனுபவம்: மொழிக்கு தனிப்பயன், டொமைன்-சார்ந்த நீட்டிப்புகளை உருவாக்கும் திறன், வெளிப்பாட்டின் புதிய நிலைகளைத் திறக்கும் மற்றும் பாய்லர்பிளேட்டைக் குறைக்கும்.

தற்போதைய நிலை மற்றும் முன்னோக்கி செல்லும் பாதை

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ் என்பது ஜாவாஸ்கிரிப்டை தரப்படுத்தும் குழுவான TC39 ஆல் உருவாக்கப்படும் ஒரு முன்மொழிவாகும். TC39 செயல்முறை நான்கு முக்கிய நிலைகளைக் கொண்டுள்ளது, நிலை 1 (முன்மொழிவு) முதல் நிலை 4 (முடிக்கப்பட்டு மொழியில் சேர்க்கத் தயாராக உள்ளது) வரை.

2023 இன் பிற்பகுதியில், "சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ்" முன்மொழிவு (அதன் சகாவான மேக்ரோக்களுடன்) நிலை 2 இல் உள்ளது. இதன் பொருள் குழு வரைவை ஏற்றுக்கொண்டுள்ளது மற்றும் விரிவான விவரக்குறிப்பில் தீவிரமாக செயல்படுகிறது. முக்கிய தொடரியல் மற்றும் சொற்பொருளியல் பெரும்பாலும் தீர்க்கப்பட்டுள்ளன, மேலும் இது பின்னூட்டத்தை வழங்க ஆரம்பகட்ட செயலாக்கங்கள் மற்றும் சோதனைகள் ஊக்குவிக்கப்படும் நிலையாகும்.

இதன் பொருள் நீங்கள் இன்று உங்கள் உலாவி அல்லது நோட்.js திட்டத்தில் import source ஐப் பயன்படுத்த முடியாது. இருப்பினும், முன்மொழிவு நிலை 3 ஐ நோக்கி முதிர்ச்சியடையும் போது, அதிநவீன பில்ட் கருவிகள் மற்றும் டிரான்ஸ்பைலர்களில் சோதனை ஆதரவு தோன்றும் என்று நாம் எதிர்பார்க்கலாம். தகவலறிந்து இருக்க சிறந்த வழி, GitHub இல் அதிகாரப்பூர்வ TC39 முன்மொழிவுகளைப் பின்தொடர்வதாகும்.

முடிவுரை: எதிர்காலம் பில்ட்-டைம்

சோர்ஸ் ஃபேஸ் இம்போர்ட்ஸ், ES மாட்யூல்ஸ் அறிமுகப்படுத்தப்பட்டதிலிருந்து ஜாவாஸ்கிரிப்ட்டின் வரலாற்றில் மிகவும் குறிப்பிடத்தக்க கட்டடக்கலை மாற்றங்களில் ஒன்றைப் பிரதிபலிக்கிறது. பில்ட்-டைம் மற்றும் ரன்டைம் இடையே ஒரு முறையான, தரப்படுத்தப்பட்ட பிரிவை உருவாக்குவதன் மூலம், இந்த முன்மொழிவு மொழியில் ஒரு அடிப்படை இடைவெளியை நிவர்த்தி செய்கிறது. இது டெவலப்பர்கள் நீண்ட காலமாக விரும்பிய திறன்களை—மேக்ரோக்கள், கம்பைல்-டைம் மெட்டாபுரோகிராமிங் மற்றும் உண்மையான ஜீரோ-காஸ்ட் அப்ஸ்ட்ராக்சன்கள்—தனிப்பயன், துண்டு துண்டான டூலிங்கின் கோளத்திலிருந்து வெளியே கொண்டு வந்து ஜாவாஸ்கிரிப்ட்டின் மையத்திற்குள் கொண்டு வருகிறது.

இது ஒரு புதிய தொடரியல் துண்டு மட்டுமல்ல; இது ஜாவாஸ்கிரிப்ட் மூலம் நாம் மென்பொருளை எவ்வாறு உருவாக்குகிறோம் என்பதைப் பற்றிய ஒரு புதிய சிந்தனை முறை. இது டெவலப்பர்களுக்கு பயனரின் சாதனத்திலிருந்து டெவலப்பரின் கணினிக்கு மேலும் தர்க்கத்தை நகர்த்த அதிகாரம் அளிக்கிறது, இதன் விளைவாக சக்திவாய்ந்த மற்றும் வெளிப்பாடான பயன்பாடுகள் மட்டுமல்ல, வேகமான மற்றும் திறமையான பயன்பாடுகளும் உருவாகின்றன. முன்மொழிவு தரப்படுத்தலை நோக்கிய அதன் பயணத்தைத் தொடரும்போது, முழு உலகளாவிய ஜாவாஸ்கிரிப்ட் சமூகமும் எதிர்பார்ப்புடன் பார்க்க வேண்டும். பில்ட்-டைம் புதுமையின் ஒரு புதிய சகாப்தம் அடிவானத்தில் உள்ளது.